<template>
  <view>
    <picker mode="selector" :range="beatsPerMeasureOptions" v-model="beatsPerMeasure">
      <view>Beats per Measure: {{ beatsPerMeasure }}</view>
    </picker>
    <picker mode="selector" :range="timeSignatureOptions" v-model="timeSignature">
      <view>Time Signature: {{ timeSignature }}</view>
    </picker>
    <slider min="30" max="240" v-model="tempo">
      <view>Tempo: {{ tempo }} BPM</view>
    </slider>
    <picker mode="selector" :range="soundOptions" v-model="sound">
      <view>Sound: {{ sound }}</view>
    </picker>
    <switch v-model="vibration">Vibration</switch>
    <switch v-model="visualCue">Visual Cue</switch>
    <button @click="saveSettings">Save Settings</button>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      beatsPerMeasureOptions: [2, 3, 4, 5, 6, 7, 8],
      timeSignatureOptions: ['4/4', '3/4', '6/8'],
      soundOptions: ['Woodblock', 'Electronic', 'Drum'],
    };
  },
  computed: {
    ...mapState(['beatsPerMeasure', 'timeSignature', 'tempo', 'sound', 'vibration', 'visualCue']),
  },
  methods: {
    ...mapMutations(['setBeatsPerMeasure', 'setTimeSignature', 'setTempo', 'setSound', 'setVibration', 'setVisualCue']),
    saveSettings() {
      // 保存设置
    },
  },
};
</script>

<style>
/* 样式定义 */
</style>
